<!--TODO  -->
<template>
  <div class="listPage">
    <div>
      <mListModuleTitle
        :titleText="this.listTitleObj.titleText"
        :showIcon="this.listTitleObj.showIcon"
        @addListItem="addListItem"
      />
      <mListItem
        :listData="this.listData"
        :showUpLoad="this.showUpLoad"
        @handleDelete="handleDeleteRec"
        @handleEdit="handleEditRec"
        @handleUpShelves="handleUpShelvesRec"
      />

      <div class="mPaginationBox">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :hide-on-single-page="true"
          @current-change="listCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <div v-if="draftsData.length">
      <mListModuleTitle
        :titleText="this.draftsTitleObj.titleText"
        :showIcon="this.draftsTitleObj.showIcon"
      />
      <DraftsList
        :listData="this.draftsData"
        :showUpLoad="false"
        @handleDelete="handleDeleteRec"
        @handleEdit="handleEditRec"
        @handleUpShelves="handleUpShelvesRec"
      />
      <div class="mPaginationBox">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="draftTotal"
          :hide-on-single-page="true"
          @current-change="draftCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      total: 0,
      limit: 10,
      currentDraftPage: 1,
      draftTotal: 0,
      draftLimit: 10,
      listData: [],
      showUpLoad: true,
      listTitleObj: {
        titleText: "生物恐怖事件列表",
        showIcon: true,
      },
      draftsTitleObj: {
        titleText: "草稿箱",
        showIcon: false,
      },
      draftsData: [],
    };
  },
  methods: {
    addListItem() {
      console.log("跳转到新增");
    },
    handleDeleteRec(param) {
      console.log(param);
    },
    handleEditRec(param) {
      console.log(param);
    },
    handleUpShelvesRec(param) {
      console.log(param);
    },
    getData() {
      this.$api.data
        .eventsList({
          offset: (this.currentPage - 1) * this.limit,
          limit: 10,
          c_type: "近代非战争使用",
        })
        .then((res) => {
          this.total = res.data.count;
          this.listData = res.data.data;
        });
    },
    getDraftData() {
      this.$api.data
        .eventsList({
          offset: (this.currentDraftPage - 1) * this.draftLimit,
          limit: 10,
          c_type: "近代非战争使用",
          draft: "Y",
        })
        .then((res) => {
          this.draftTotal = res.data.count;
          this.draftsData = res.data.data;
        });
    },
    draftCurrentChange(val) {
      this.currentDraftPage = val;
      this.getDraftData();
    },
    listCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
  mounted() {
    this.getData();
    this.getDraftData();
  },
};
</script>
<style  scoped>
</style>